<template>
  <a-card title="编辑文章">
    <a-form-model
      :model="form"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :rules="rules"
      ref="ruleForm"
    >
      <a-form-model-item label="文章标题" prop="title">
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="文章描述" prop="desc">
        <a-input v-model="form.desc" />
      </a-form-model-item>
      <a-form-model-item label="文章作者">
        <a-input v-model="form.author" type="textarea" />
      </a-form-model-item>
      <a-form-model-item label="封面图片">
        <a-upload
          name="file"
          :multiple="true"
          action="http://rap2api.taobao.org/app/mock/279365/api/v1/upload"
          :headers="headers"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" />上传图片</a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="文章内容">
        <a-input v-model="form.content" type="textarea" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onClcik"> 提交 </a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
import { getArt } from '../../api'
export default {
  data () {
    return {
      // 表单基本内容
      form: {
        title: '',
        desc: '',
        author: '',
        thumb: '',
        content: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // 表单规则
      rules: {
        title: [{ required: true, message: '请输入标题' }],
        desc: [{ required: true, message: '请输入描述' }]
      },
      // 设置上传的请求头部，IE10 以上有效
      headers: {
        authorization: 'authorization-text'
      }
    }
  },
  created () {
    this.getArt()
  },
  methods: {
    getArt () {
      // 获取当前编辑数据的id
      const artId = this.$route.params.id
      console.log(this.$route, 'this.$route')
      console.log(artId, 'artId')
      getArt(artId).then((res) => {
        console.log(res, 'getArt')
        if (res.data.code === 200) {
          this.form = res.data.data
        }
      })
    },
    // 提交事件的方法
    onClcik () {
      console.log(this.form, 'this.form')

      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 有验证 通过执行代码段
          // 发送ajax请求
          this.$message.success('编辑结束！', 3, () => {
            this.$router.replace('/admin/artList')
          })
          // 发送Ajax 结束
        } else {
          // 无验证 通过执行代码段
          console.log('error submit!!')
          return false
        }
      })
    },
    // 上传文件控件中的 @change 方法
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.form.thumb = info.file.name
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
